 <template>
  <div>
    <el-row>
      <!--检索-->
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-input v-if="false" v-model="search.pageNum"></el-input>
        <el-input v-if="false" v-model="search.pageSize"></el-input>
        <el-col :span="4">
          <el-input
            v-model="search.memberId"
            placeholder="请输入会员账号"
          ></el-input>
        </el-col>
        <el-col :span="12"
          ><div>
            <el-button type="primary" icon="el-icon-search" @click="searchBtn"
              >搜索</el-button
            >
            <el-button type="info" icon="el-icon-loading" @click="emptyBtn"
              >刷新</el-button
            >
          </div>
        </el-col></el-form
      >
      <el-button type="primary" @click="addBtn" icon="el-icon-circle-plus"
        >新增</el-button
      >
      <!--功能列表-->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="Id" sortable> </el-table-column>
        <el-table-column prop="memberId" label="会员ID"> </el-table-column>
        <el-table-column prop="createTime" label="记录时间"> </el-table-column>
        <el-table-column prop="changeType" label="变化类型"> </el-table-column>

        <el-table-column prop="changeCount" label="积分改变数量"> </el-table-column>
        <el-table-column prop="operateMan" label="操作人员"> </el-table-column>
        <el-table-column prop="operateNote" label="备注"> </el-table-column>
        <el-table-column
          prop="sourceType"
          :formatter="getsourceType"
          label="用户类型"
        > 
            
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="updateInfo(scope.$index, scope.row)"
              icon="el-icon-edit"
              type="success"
              >编辑</el-button
            >
            <el-button
              size="small"
              @click="deleteInfo(scope.$index, scope.row)"
              icon="el-icon-delete"
              type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页功能-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[1, 5, 10, 20, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
      <!--新增/修改 Form -->
      <el-dialog title="会员积分" :visible.sync="editInfoState">
        <el-form :model="formInfo">
          <el-form-item label="会员Id" :label-width="formLabelWidth">
            <el-input
              v-model="formInfo.memberId"
              placeholder="会员Id"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建记录时间" :label-width="formLabelWidth">
            <el-input
              v-model="formInfo.createTime"
              placeholder="创建记录时间"
              auto-complete="off"
              type="date"
            ></el-input>
          </el-form-item>

          <el-form-item label="积分变化类型" :label-width="formLabelWidth">
            <el-input
              v-model="formInfo.changeType"
              placeholder="积分变化类型"
              auto-complete="off"
            ></el-input>
          </el-form-item>

        <el-form-item label="积分数量" :label-width="formLabelWidth">
            <el-input
              v-model="formInfo.changeCount"
              placeholder="积分数量"
              auto-complete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="操作人员" :label-width="formLabelWidth">
            <el-input
              v-model="formInfo.operateMan"
              placeholder="操作人员"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input
              v-model="formInfo.operateNote"
              placeholder="备注"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="积分来源" :label-width="formLabelWidth">
            <el-radio v-model="formInfo.sourceType" :label="2"
              >官网或者app顶专车或者个人消费后</el-radio
            >
            <el-radio v-model="formInfo.sourceType" :label="1"
              >自驾服务消费金额</el-radio
            >
            <el-radio v-model="formInfo.sourceType" :label="0"
              >参与官方活动</el-radio
            >
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editInfoState = false">取 消</el-button>
          <el-button type="primary" @click="saveInfo">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

 <script>
export default {
  data() {
    return {
      tableData: [],
      powerData: [],
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      page: {},
      formInfo: {},
      search: { pageNum: 1, pageSize: 5 },
      formLabelWidth: "120px",
      editInfoState: false,
    };
  },
  created: function () {
    this.load();
  },
  methods: {
    //初始化数据
    load() {
      var _this = this;
      //页面初始化时，加载的方法
      this.$http
        .get("http://localhost:9999/ms/integrationHistory/queryAllByParam", {
          params: {
            pageNo: this.search.pageNum,
            pageSize: this.search.pageSize,
            name: this.search.memberId,
          },
        })
        .then((response) => {
          _this.tableData = response.data.data.list;
          _this.page = response.data.data;
          _this.total = response.data.data.total;
        });
    },
    //每页显示数量发生变化
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.search.pageSize = val;
      this.load();
    },
    //第几页发生变化
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.search.pageNum = val;
      this.load();
    },
    //查询
    searchBtn() {
      console.log(`当前页`);
      this.load();
    },
    //刷新
    emptyBtn() {
      this.search = {};
      this.search.pageNum = 1;
      this.search.pageSize = 5;
      this.load();
    },
    getStatusName(row, column, cellValue) {
      return cellValue == 1 ? "是" : "否";
    },
    addBtn() {
      this.formInfo = {};
      this.editInfoState = true;
    },
    updateInfo: function (index, row) {
      this.formInfo = row;
      this.editInfoState = true;
    },
    saveInfo: function () {
      var _this = this;
      if (
        _this.formInfo.id != null &&
        _this.formInfo.id != "" &&
        _this.formInfo.id != undefined
      ) {
        this.$http
          .put(
            "http://localhost:9999/ms/integrationHistory/updateIntegration",
            _this.formInfo
          )
          .then(function (response) {
            //正确请求时，回调函数
            console.log(response);
            _this.load();
            _this.editInfoState = false;
          })
          .catch(function (error) {
            _this.editInfoState = false;
            _this.load();
            //失败处理
            console.log(error);
          });
      } else {
        this.$http
          .post(
            "http://localhost:9999/ms/integrationHistory/insertIntegration",
            _this.formInfo
          )
          .then(function (response) {
            //正确请求时，回调函数
            _this.load();
            _this.editInfoState = false;
          })
          .catch(function (error) {
            //失败处理
            console.log(error);
          });
      }
    },

    //积分来源获取名称
     getsourceType(row, column, cellValue){
      var tmpType = "";
      if (cellValue == 0) {
        tmpType = "官网或者app顶专车或者个人消费后";
      } else if (cellValue == 1) {
        tmpType = "自驾服务消费金额";
      } else {
        tmpType = "参与官方活动";
      }
      return tmpType;
    },


    deleteInfo: function (index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var _this = this;
          this.$http
            .delete(
              "http://localhost:9999/ms/integrationHistory/deleteIntegration?id=" +
                row.id
            )
            .then(function (response) {
              if (response.status == 200) {
                //提示成功
                _this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                //重新加载数据
                _this.load();
              }
            })
            .catch(function (error) {
              console.log(error);
              _this.$message.error("你错了。。。");
            });
        })

    .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style>
</style>